<template>
  <div class="main">
    <div style="background-color: white">
      <el-input
        v-model="func.functionName"
        placeholder="请输入角色名称"
      ></el-input>
      <el-input v-model="func.type" placeholder="请输入权限类型"></el-input>
      <el-button
        icon="el-icon-search"
        type="primary"
        circle
        @click="getDate()"
      ></el-button>
      <el-button
        icon="el-icon-refresh-left"
        @click="reset()"
        type="info"
        circle
      ></el-button>
      <el-button
        icon="el-icon-circle-plus-outline"
        type="primary"
        @click="add()"
        style="margin-left: 600px"
        circle
      ></el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="权限名" width="180"></el-table-column>
      <el-table-column
        prop="type"
        label="权限类型"
        width="180"
      >
      <template slot-scope="scope">
        <span v-if="scope.row.type == 4">菜单权限</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="code"
        label="权限编码"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="describes"
        label="描述"
        width="180"
      ></el-table-column>
      <el-table-column prop="" label="操作">
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <pagination
        :total="total"
        :pageNum="pageNum"
        :pageSize="pageSize"
        @changePageSize="changePageSize"
        @changePageNum="changePageNum"
      ></pagination>
    </div>

    <!-- <el-drawer
      title="title"
      size="30%"
      :visible.sync="drawerDialog"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="drawerForm"></div>
    </el-drawer> -->
  </div>
</template>
<script>
import { listPage } from "@/api/function";
import Pagination from "@/components/Pagination/index";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 10,
      drawerDialog: false,
      direction: "rtl",
      func: {
        functionName: "",
        type: "",
      },
    };
  },
  methods: {
    changePageSize(val) {
      this.pageSize = val;
      this.getDate();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.getDate();
    },
    getDate() {
      const param = {
        page: this.pageNum,
        limit: this.pageSize,
        functionName: this.func.functionName,
        type: this.func.type,
      };
      listPage(param).then((res) => {
        console.log(res.data);
        this.total = res.total;
        this.tableData = res.data;
      });
    },
    reset() {
      this.func.functionName = "";
      this.func.type = "";
      this.getDate();
    },
    delete() {},
    add() {
      this.drawerDialog = true;
    },
    handleClose() {
      this.drawerDialog = false;
    },
  },
  mounted() {
    this.getDate();
  },
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 150px;
  padding: 10px;
}
.el-select {
  width: 150px;
}
.el-table-column {
  text-align: center;
}
.main {
  margin-left: 30px;
}
.pagination {
  margin-top: 30px;
  text-align: center;
}
.el-input {
  width: 200px;
}
.el-textarea {
  width: 200px;
}
.el-select {
  width: 200px;
}
</style>
